// 待办事项列表组件，渲染所有事项
import React from 'react'
import { useSelector } from 'react-redux'
import type { RootState } from '../store'
import TodoItem from './TodoItem'

const TodoList: React.FC<{ filter: import('../App').TodoStatus }> = ({ filter }) => {
  const todos = useSelector((state: RootState) => state.todo.todos)
  // 根据 filter 进行筛选
  const filteredTodos = todos.filter(todo => {
    if (filter === 'all') return true
    if (filter === 'active') return !todo.completed
    if (filter === 'completed') return todo.completed
    return true
  })

  return (
    <div>
      {filteredTodos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
        />
      ))}
    </div>
  )
}

export default TodoList